<template>
    <div class="container">
        <div class="row1 font-size-16">
            <span class="">未结账商品</span>
            <div class="row1-right">
                <span class="selected">已选：<span class="color-FF6A00">{{ multipleSelection.length }}项 共{{ waresData.length
                }}份</span></span>
                <span class=" count">总额：<span class="color-FF3333">{{ price }}</span></span>
            </div>

        </div>
        <el-table class="tableRef" ref="tableRef" :data="waresData" scrollbar-always-on @row-click="handleRowClick"
            :row-key="getRowKey" @selection-change="handleSelectionChange">
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" :selectable="selectable" width="50" />
            <el-table-column prop="goodsName" label="商品" min-width="40%" show-overflow-tooltip :fit="false">
                <template #default="scope">
                    <div class="wares-name-box">
                        <img v-if="scope.row.isPackage" class="taocan-img"
                            src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/order/taocan.png" alt="">
                        <div class="wares-name">{{ scope.row.goodsName }}</div>
                    </div>
                    <div v-if="scope.row.isPackage">
                        <div class="taocan-box" v-for="(item, index) in scope.row.subGoods" :key="index">
                            <div class="taocan-circle"></div>
                            <div class="taocan-name">{{ item.goodsName }}*{{ item.orderQty }}</div>
                        </div>
                    </div>
                    <div class="wares-remark">{{ scope.row.flavor }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="orderQty" label="数量" min-width="20%" align="center"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="salePrice" label="单价" min-width="20%" align="center" show-overflow-tooltip>
                <template #default="scope">￥{{ scope.row.salePrice }}</template>
            </el-table-column>
            <el-table-column prop="jg" label="价格" min-width="20%" align="center" show-overflow-tooltip>
                <template #default="scope">￥{{ scope.row.jg }}</template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { formatDecimal } from '@/utils/chenhao'
import ls from '@/lib/ls'
const router = useRouter()

// 接收父组件参数 props
const props = defineProps({
    waresData: {
        type: Array,
        required: false,
    },
    saleData: {
        type: Array,
        required: false,
    },
    payData: {
        type: Array,
        required: false,
    },
    price: {
        type: String,
        required: false,
    },
})
const saleData = toRef(props, 'saleData')
const payData = toRef(props, 'payData')
const waresData = toRef(props, 'waresData')
// let { waresData,price } = props;
// 调用父组件
const emit = defineEmits(['emitSelectionChange'])

// 点击多选事件
let multipleSelection = ref([])
const handleSelectionChange = (val) => {
    console.log('payData :>> ', payData.value);
    multipleSelection.value = val
    emit('emitPaySuccess', multipleSelection.value)
}

const waresOrder = ls.get('WARES_ORDER') || []
const todo = router.currentRoute.value.query.todo

// console.log('waresOrder :>> ', waresOrder.length);
const selectable = (row, index) => {
    if (todo == 'orderAdd') {
        return false
    }
    if (payData.value.length > 0) {
        return false
    }
    else if (payData.value.length > 0) {
        let flag = true
        payData.value.forEach(item => {
            item.detailList.forEach(itemCode => {
                if (row.itemCode == itemCode) {
                    flag = false
                }
            })
        });
        return flag
    } else {
        return true
    }
}

const tableRef = ref()
watch(waresData, (nVal) => {
    nextTick(() => {
        // if (payData.value.length <= 0 || waresOrder.length <= 0) {
        waresData.value.forEach((item, index) => {
            tableRef.value.toggleRowSelection(waresData.value[index], true);
        })
        // }
    })
},)


// 点击row任意位置勾选
// 获取表格的row-key，通常为每一行的唯一标识
const getRowKey = (row) => row.itemCode;

// 点击行事件处理
function handleRowClick(row) {
    if (todo == 'orderAdd') return
    if (payData.value.length > 0) return
    tableRef.value.toggleRowSelection(row);
}

</script>
<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
.container {
    width: 540px;
    height: 830px;
    background: #FFFFFF;
    border-radius: 8px;

    .row1 {
        // position: relative;
        display: flex;
        justify-content: space-between;
        padding-top: 16px;
        padding-left: 20px;
        padding-right: 20px;

        .row1-right {
            .selected {
                // margin-right: 100px;
                // position: relative;
                // right: 180px;
                // margin-left: 142px;
            }

            .count {
                // position: absolute;
                // float: right;
                margin-left: 40px;
            }
        }

    }

    .tableRef {
        margin-top: 6px;
        height: 790px;

        ::v-deep {

            .el-table__cell {
                font-weight: 400;
                font-size: 16px;
                color: #212121;
                border-bottom: 0px;
            }

            .el-table__header {
                .el-table__cell {
                    height: 48px;
                    background-color: #E6E6E6 !important;
                }
            }

            .el-table__inner-wrapper::before {
                height: 0px;
            }

            .el-table__body {
                // -webkit-border-horizontal-spacing: 13px;  // 水平间距
                -webkit-border-vertical-spacing: 10px; // 垂直间距 设置的是行间距
                // margin-top: 20px ;
                // padding: 0 20px;
                // width: 200px!important;
            }

            .el-table__row {
                background: #F9F9F9;
            }

            // .el-table__row td {
            //     // padding: 10px 0;
            //     // border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
            //     // border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;

            //     &:first-child {
            //         // border-left: 20px solid #FFFFFF !important;
            //         // border-radius: 5px 0 0 5px;
            //     }
            // }

            // .el-table__row>td {

            //     &:last-child {
            //         // border-right: 20px solid #FFFFFF !important;
            //         // border-radius: 0 5px 5px 0;
            //         // right: 1px;
            //     }
            // }

            // .el-table__body tr:hover>td.el-table__cell {
            //     // background-color: rgba(0, 110, 255, 0.05);

            // }

            // .el-table__row {
            //     .el-table-column--selection {

            //     }
            // }
            // 修改多选框的颜色


            .el-checkbox__inner {
                width: 20px;
                height: 20px;
                border: 2px solid #666666;
                border-radius: 4px;
                background: #F9F9F9;
            }

            .is-checked {
                .el-checkbox__inner {
                    width: 20px;
                    height: 20px;
                    border: 2px solid #FF6A00;
                    border-radius: 4px;
                    // background: #FF6A00;
                }

                .el-checkbox__inner::after {
                    border: 2px solid #FF6A00;
                    border-left: 0;
                    border-top: 0;
                    left: 6px;
                    top: 3px;
                }
            }

            .el-table__header-wrapper table,
            .el-table__body-wrapper table {
                width: 100% !important;
            }

            .el-table__body,
            .el-table__footer,
            .el-table__header {
                table-layout: auto;
            }

        }

        .wares-name-box {
            display: flex;
            align-items: center;

            .taocan-img {
                width: 40px;
                height: 20px;
                margin-right: 8px;
            }

            .wares-name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .wares-remark {
            margin-top: 5px;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
        }

        .taocan-box {
            display: flex;
            align-items: center;
            padding-left: 17px;

            .taocan-circle {
                width: 6px;
                height: 6px;
                background: #FF6A00;
                border-radius: 50%;
                margin-right: 10px;
            }

            .taocan-name {
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #666666;
                line-height: 22px;
            }
        }
    }
}

.dib {
    display: inline-block;
}

.font-size-16 {
    font-size: 16px;
}

.color-FF6A00 {
    color: #FF6A00;
}

.color-FF3333 {
    color: #FF3333;
}
</style>
